<!-- toaster directive -->
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>

<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main"><i class="glyphicon glyphicon-cog"></i> 系统管理</a></li>
        <li><a ui-sref="main.sys.role.list" class="active">角色管理</a></li>
        <li class="active" ng-bind="title"></li>
    </ul>
</div>

<!-- 内容区域 -->
<div class="wrapper-md content">
    <div class="panel panel-default">
        <!-- 头部 -->
        <div class="panel-heading font-bold">
            <a class="btn btn-sm btn-icon btn-rounded btn-default pull-right m-t-n-xs" ui-sref="main.sys.role.list"><i
                    class="text-md glyphicon glyphicon-chevron-up text-muted"></i></a>
        </div>
        <!--表单-->
        <div class="panel-body">
            <form class="form-horizontal" name="user_form">
                <!-- 角色名称 -->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="roleName">
                        <span class="text-danger wrapper-sm">*</span>角色名称</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="roleName" id="roleName"
                               placeholder="请输入角色名称" value="" ng-blur="testRoleName()"
                               ng-model="record.roleName" required/>
                    </div>
                </div>

                <!-- 状态 -->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="enable">
                        <span class="text-danger wrapper-sm">*</span>是否启用</label>
                    <div class="col-sm-6">
                        <select class="form-control" ng-model="record.enable" name="enable" id="enable">
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                </div>

                <div class="line line-dashed b-b line-lg pull-in"></div>

                <input type="hidden" class="form-control" name="permission" id="permission" ng-model="record.permission"required>
                <!-- 备注 -->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="remark_">
                        <span class="text-danger wrapper-sm"></span>备 注</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="remark_" id="remark_" placeholder="请输入备注..."
                               ng-model="record.remark_" >
                    </div>
                </div>
                <!-- 权限 -->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="remark_"><span class="text-danger wrapper-sm">*</span>权限</label>
                    <div>
                        <isteven-multi-select
                                input-model="modernBrowsers"
                                output-model="outputBrowsers"
                                button-label="icon name"
                                item-label="icon name maker"
                                tick-property="ticked"
                                group-property="msGroup"
                                orientation="horizontal"
                                on-close="fClose()"
                        >
                        </isteven-multi-select>
                        <!--<input type="hidden" class="form-control" name="permission" id="permission"
                               placeholder="请输入备注..." ng-model="record.permission">-->
                    </div>
                </div>
				<style type="text/css">
					.multiSelect > button{
						margin-left: 15px;
					}
				</style>
                <div class="line line-dashed b-b line-lg pull-in"></div>

                <div class="form-group" style="width: 100%">
                    <div class="col-sm-6 col-sm-offset-2 text-center"
                         style="width: 100%;margin: 0;padding: 0;text-align: center">
                        <button type="button" class="btn  w-xs addNew" ng-show="reset" ng-click="resetFrom()">重置</button>
                        <button type="submit" class="btn btn-info w-xs m-l-xl addNew" ng-disabled="isDisabled">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<style scoped>
    .multiSelect .show {
        width: 800px;
        left: -250px;
    }

    .multiSelect .multiSelectItem {
        min-width: auto !important;
    }

    .col-lg-2 {
        background-color: #fff;
    }

    .multiSelect .line {
        height: auto;
    }

    .multiSelect .inputFilter {
        height: auto;
    }

    .multiSelect .clearButton {
        top: 3px;
        right: 1px;
    }

    .form-group {
        width: 50%;
        float: left;
    }

    .form-group .col-lg-2 {
        width: 25%;
    }

    .form-group .col-lg-4 {
        width: 65%;
    }

    .app-content-body .content {
        margin-top: 44px;
    }


</style>